import { NavBar, Card } from "antd-mobile";
import { EnvironmentOutline } from "antd-mobile-icons";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import "./sy2.css";

function Sy2() {
  const nav=useNavigate()
  const navigate = useNavigate();
  const [selectedCampus, setSelectedCampus] = useState<string | null>(null);
  const ke=()=>{
    nav('/ke')
  }
  // 院区数据
  const campusList = [
    {
      id: "1",
      name: "四川省保健院南苑",
      address: "四川省成都市锦江区画溪路666号",
      icon: "🏥",
    },
    {
      id: "2",
      name: "四川省保健院北苑",
      address: "四川省成都市锦江区画溪路666号",
      icon: "🏥",
    },
    {
      id: "3",
      name: "四川省保健院体检中心",
      address: "四川省成都市锦江区画溪路666号",
      icon: "🏥",
    },
  ];

  const handleCampusSelect = (campusId: string, campusName: string) => {
    setSelectedCampus(campusId);
    console.log("选择院区:", campusName);
    // 这里可以添加选择院区后的逻辑，比如跳转到其他页面
    // navigate('/some-page')
  };

  return (
    <div className="sy2-container">
      {/* 顶部导航栏 */}
      <NavBar onBack={() => navigate(-1)} className="sy2-navbar">
        院区列表
      </NavBar>

      {/* 页面内容 */}
      <div className="sy2-content">
        {/* 提示文字 */}
        <div className="instruction-text">请选择院区</div>

        {/* 院区列表 */}
        <div className="campus-list" onClick={ke}>
          {campusList.map((campus) => (
            <Card
              key={campus.id}
              className={`campus-card ${
                selectedCampus === campus.id ? "selected" : ""
              }`}
              onClick={() => handleCampusSelect(campus.id, campus.name)}
            >
              <div className="campus-content">
                <div className="campus-icon">
                  <div className="icon-wrapper">
                    <EnvironmentOutline fontSize={24} />
                  </div>
                </div>
                <div className="campus-info">
                  <div className="campus-name">{campus.name}</div>
                  <div className="campus-address">{campus.address}</div>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}

export default Sy2;
